<style>
    .tips {
        color: red;
    }
    .form-content {
        padding: 20px;
    }
</style>
<form action="{:sysuri()}" data-table-id="FormTable" class="layui-form layui-card" data-auto="true" method="post" style="height:500px;overflow:scroll;">
    <div class="layui-form layui-card padding-30">
        <div class="layui-tab">
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="tips">*</span>发件人姓名：</label>
                <div class="layui-input-block">
                    <div class="layui-col-md4">
                        <input type="text" name="name" value="{$info.name|default=''}" lay-verify="required" lay-verType="tips" placeholder="请输入发件人姓名"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="tips">*</span>发件人手机号：</label>
                <div class="layui-input-block">
                    <div class="layui-col-md4">
                        <input type="text" name="mobile" value="{$info.mobile|default=''}" lay-verify="required" lay-verType="tips" placeholder="请输入发件人手机号"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">发货地址：</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline" style="width:120px;">
                        <select name="province_id" id="province" lay-filter="province">
                            <option value="0">请选择省份</option>
                            {foreach $province as $k=>$v}
                                <option value="{$v.adcode}" {if $info.province_id eq $v.adcode}selected{/if}>{$v.name}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width:120px;">
                        <select name="city_id" id="city" lay-filter="city">
                            <option value="{$info.city_id}" selected>{$info.city_name}</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width:120px;">
                        <select name="district_id" id="district">
                            <option value="{$info.district_id}"  selected>{$info.city_name}</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="address" value="{$info.address|default=''}" id="address" value="" autocomplete="off" class="layui-input" placeholder="请输入发件人地址">
                    </div>
                </div>
            </div>
        </div>
         <div class="layui-form-item text-center">
             <input type="hidden" value="{$id}" name="id">
            <button class="layui-btn" type="submit">保存</button>
        </div>
    </div>
</form>
<script>

        layui.use(['form','layedit'], function(){
            var form = layui.form,
                layedit = layui.layedit,
                $ = layui.jquery,
                layer = layui.layer;
            form.on('select(province)', function(data){
                _province = data.value;

                $("select[name=city_id]").val('');
                $("select[name=district_id]").val('');
                $("select[name=city_id]").attr('disabled',true);
                $("select[name=district_id]").attr('disabled',true);
                $.ajax({
                    url:"{:url('getCity')}",
                    data:{
                        pid:_province
                    },
                    type:"post",
                    success:function(datas){
                        if(datas.code == 1){
                            datas = datas.data;
                            $("select[name=city_id]").html('<option value="">请选择</option>'); //清空
                            if(datas.length>0){
                                $.each(datas, function(key, val) {
                                    var option1 = $("<option>").val(val.adcode).text(val.name);
                                    $("select[name=city_id]").append(option1);
                                    $("select[name=city_id]").attr('disabled',false);
                                    form.render('select');
                                });
                            }else{
                                form.render('select');
                            }
                            $("select[name=city_id]").get(0).selectedIndex=0;
                        }
                    }
                });

            });
            form.on('select(city)', function(data){
                _city = data.value;
                $("select[name=district_id]").val('');
                $("select[name=district_id]").attr('disabled',true);
                $.ajax({
                    url:"{:url('getCity')}",
                    data:{
                        pid:_city
                    },
                    type:"post",
                    success:function(datas){
                        if(datas.code == 1){
                            if(datas.code == 1){
                                _course = datas.data;
                                if(_course.length > 0){
                                    var _html = '<option value="">请选择</option>';
                                    $.each(_course,function (i,n) {
                                        _html+='<option value="'+n.adcode+'" >'+n.name+'</option>'
                                    })
                                    $('select[name=district_id]').html(_html);
                                    $("select[name=district_id]").attr('disabled',false);
                                    form.render('select');
                                }
                            }
                            form.render('select');
                        }
                    }
                });
            });
        });
</script>
